<template>
  <div class="idc-form">
    <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px">
      <el-form-item label="id" prop="id" v-show="false">
        <el-input v-model="form.id" placeholder="id"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入IDC名称"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入IDC地址"></el-input>
      </el-form-item>
      <el-form-item label="管理员" prop="manage">
        <el-input v-model="form.manage" placeholder="请输入IDC管理员"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入IDC电话"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入IDC邮箱"></el-input>
      </el-form-item>
      <el-form-item label="简称" prop="letter">
        <el-input v-model="form.letter" placeholder="请输入IDC简称"></el-input>
      </el-form-item>

      <el-form-item class="btn-wapper">
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" type="primary" @click="submitForm" :loading="isLoading">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'idc-form',
    props: {
      isLoading: {
        // 提交时转圈圈，父层传入
        required: true,
        type: Boolean
      },
      form: {
        type: Object,
        default() {
          // 默认值，新增时使用
          return {
            name: '',
            phone: '',
            address: '',
            manage: '',
            email: '',
            letter: ''
          }
        }
      }
    },
    data() {
      const validateEmail = (rule, value, callback) => {
        const regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
        if (!regEmail.test(value)) {
          callback(new Error('请填写正确的邮箱，如: abc@126.com '))
        } else {
          callback()
        }
      }
      return {
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入电话号码', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' }
          ],
          manage: [
            { required: true, message: '请输入管理员', trigger: 'blur' }
          ],
          email: [
            { required: true, validator: validateEmail, trigger: 'blur' }
          ],
          letter: [
            { required: true, message: '请输入简称', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submitForm() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return
          }
          // console.log('form commit', this.form)
          this.$emit('submit', this.form)
        })
      },
      cancel() {
        this.$emit('cancel')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .idc-form {
    .btn-wapper {
      text-align: right;
    }
  }
</style>
